<script lang="ts" setup>
import type { WorkbenchTodoItem } from '../components/typing';

import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import WorkbenchHeader from '../components/workbench-header.vue';

const userStore = useUserStore();
const router = useRouter();

const quickNavItems: WorkbenchQuickNavItem[] = [
  // {
  //   color: "#1fdaca",
  //   icon: "ion:home-outline",
  //   title: "首页",
  //   onClick: () => {
  //     router.push(userInfo.homePath || DEFAULT_HOME_PATH);
  //   },
  // },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: '订餐',
    onClick: () => {
      router.push('/canteen/orderfood');
    },
  },
  // {
  //   color: "#e18525",
  //   icon: "ion:layers-outline",
  //   title: "组件",
  //   onClick: () => {},
  // },
  // {
  //   color: "#3fb27f",
  //   icon: "ion:settings-outline",
  //   title: "系统管理",
  //   onClick: () => {},
  // },
  // {
  //   color: "#4daf1bc9",
  //   icon: "ion:key-outline",
  //   title: "权限管理",
  //   onClick: () => {},
  // },
  // {
  //   color: "#00d8ff",
  //   icon: "ion:bar-chart-outline",
  //   title: "图表",
  //   onClick: () => {},
  // },
];

const todoItems = ref<WorkbenchTodoItem[]>([]);

onMounted(async () => {
  // resetAllStores();
});
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        早安, {{ userStore.userInfo?.nickname }}, 开始您一天的工作吧！
      </template>
      <!-- <template #description> 今日晴，20℃ - 32℃！ </template> -->
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col lg:flex-row">
      <!-- <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" /> -->
    </div>

    <!-- <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" /> -->
  </div>
</template>
